<!-- 个人中心绑定手机号等操作页面头部样式 -->
<template>
  <div class="login-header">
    <div class="left">
      <!-- 根据AI中台和实训来动态修改 -->
      <img v-if="config.itemType === 'AI实训平台'" class="w-168 h-20" src="@/assets/img/logo-bg.svg" />
      <img v-else-if="config.itemType === 'AI中台'" class="w-133 h-20" src="@/assets/img/logo-bg-ai.svg" />
    </div>
    <div v-if="token" class="right">
      <div>
        <a-badge :count="1" :overflow-count="99">
          <i class="iconfont icon-notification-fill"></i>
        </a-badge>
      </div>
      <a-dropdown placement="bottomRight">
        <div class="ant-dropdown-link">
          <div class="round">{{ userInfoStore.userNameLastTwo }}</div>
          <i class="iconfont icon-arrow-down-s-line"></i>
        </div>
        <template #overlay>
          <a-menu>
            <a-menu-item @click="goPersonalCenter">个人中心</a-menu-item>
            <a-menu-item @click="logout">退出登录</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { storage } from 'g6-fn'
  import { useRouter } from 'vue-router'

  import { useUserInfoStore } from '@/store'
  import { useConfigStore } from '@/store/config'

  const config = useConfigStore()

  const router = useRouter()
  const userInfoStore = useUserInfoStore()

  const token = storage.get('token')

  const logout = () => {
    userInfoStore.$reset()
    router.push('/login')
  }
  const goPersonalCenter = () => {
    window.open('/personal-center')
  }
</script>

<style lang="less" scoped>
  .login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 44px;
    background: @background1;
    box-shadow: 0 1px 3px rgba(37, 37, 45, 0.16);

    .right {
      .fc();

      gap: 0 26px;
      cursor: pointer;
    }

    .ant-dropdown-link {
      display: flex;
      gap: 0 8px;
      cursor: pointer;

      > i {
        .font18();
      }

      .round {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        color: @primary1;
        background: rgba(24, 104, 233, 0.1);
        border-radius: 50%;
        .font12();
      }
    }
  }
</style>
